<template>
  <div class="map">
    <div ref="target" style="width: 100%; height: 100%"></div>
    <div class="map2"></div>
    <div class="map3"></div>
    <div class="chart"></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
//import mapJson from "@/assets/mapData/china.json";
import shanxiJson from "@/assets/mapData/shanxi.json";
import { onMounted, ref, watch } from "vue";

// const props = defineProps({
//   data: {
//     type: Object,
//     required: true,
//   },
// });

var myChart = null;
var target = ref(null);
//=============== start ===============//
/**
 * 🚨🚨非常重要🚨🚨
 * 下面是 网站左侧代码，核心代码
 */
//  山西省共有十一个地级市，这些地级市分别是太原市、大同市、朔州市、忻州市、阳泉市、吕梁市、晋中市、长治市、晋城市、临汾市和运城市。
var shanxi = "https://geo.datav.aliyun.com/areas_v3/bound/140000_full.json";
var datong = "https://geo.datav.aliyun.com/areas_v3/bound/140200_full.json";
var yuncheng = "https://geo.datav.aliyun.com/areas_v3/bound/140800_full.json";
var shuozhou = "https://geo.datav.aliyun.com/areas_v3/bound/140600_full.json";
var xinzhou = "https://geo.datav.aliyun.com/areas_v3/bound/140900_full.json";
var taiyuan = "https://geo.datav.aliyun.com/areas_v3/bound/140100_full.json";
var yangquan = "https://geo.datav.aliyun.com/areas_v3/bound/140300_full.json";
var lvliang = "https://geo.datav.aliyun.com/areas_v3/bound/141100_full.json";
var jinzhong = "https://geo.datav.aliyun.com/areas_v3/bound/140700_full.json";
var changzhi = "https://geo.datav.aliyun.com/areas_v3/bound/140400_full.json";
var linfen = "https://geo.datav.aliyun.com/areas_v3/bound/141000_full.json";
var jincheng = "https://geo.datav.aliyun.com/areas_v3/bound/140500_full.json";
onMounted(() => {
  echarts.registerMap("shanxi", shanxiJson);
  //echarts.registerMap("china", mapJson);
  myChart = echarts.init(target.value);
  renderChart();
});

var renderChart = () => {
  // var planePath =
  //   "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z";
  // var planePath = "pin";
  var planePath = "image:///truck.svg";

  var points = [
    // 散点图数据
    {
      name: "长治",
      value: [113.1582, 36.4701],
      itemStyle: { color: "#00EEFF" },
    }, // 新疆
    {
      name: "晋城",
      value: [112.9582, 35.6501],
      itemStyle: { color: "#00EEFF" },
    }, // 四川
    {
      name: "晋中",
      value: [113.1582, 37.2701],
      itemStyle: { color: "#00EEFF" },
    }, // 甘肃
    {
      name: "临汾",
      value: [111.0668, 36.1234],
      itemStyle: { color: "#00EEFF" },
    }, // 云南
    {
      name: "太原",
      value: [112.4219, 37.9189],
      itemStyle: { color: "#00EEFF" },
    }, // 广西
    {
      name: "运城",
      value: [111.0668, 35.1234],
      itemStyle: { color: "#00EEFF" },
    }, // 湖南
    {
      name: "吕梁",
      value: [111.2668, 37.6539],
      itemStyle: { color: "#00EEFF" },
    }, // 山东
    {
      name: "大同",
      value: [113.7668, 39.8539],
      itemStyle: { color: "#00EEFF" },
    }, // 河南
    {
      name: "忻州",
      value: [112.2668, 38.8539],
      itemStyle: { color: "#00EEFF" },
    }, // 山西
  ];
  var linesData = [
    // 运城-大同
    {
      coords: [
        [111.0668, 35.1234],
        [113.7668, 39.8539],
      ],
    }, // 运城->太原
    {
      coords: [
        [111.0668, 35.1234],
        [112.4219, 37.9189],
      ],
    }, //晋城-吕梁
    {
      coords: [
        [112.9582, 35.6501],
        [111.2668, 37.6539],
      ],
    }, // 临汾-大同
    {
      coords: [
        [111.0668, 36.1234],
        [113.7668, 39.8539],
      ],
    }, // 忻州-长治
    {
      coords: [
        [112.2668, 38.8539],
        [113.1582, 36.4701],
      ],
    }, // 北京->福建
  ];
  var series = [
    {
      //散点系列数据
      type: "effectScatter", //带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
      coordinateSystem: "geo", //该系列使用的坐标系:地理坐标系
      effectType: "ripple", //特效类型,目前只支持涟漪特效'ripple'，意为“涟漪”
      showEffectOn: "render", //配置何时显示特效。可选'render'(绘制完成后显示特效)和'emphasis'(高亮的时候显示特效) 。
      rippleEffect: {
        //涟漪特效相关配置
        period: 10, // 动画的周期，秒数。
        scale: 4, // 动画中波纹的最大缩放比例。
        brushType: "stroke", // 波纹的绘制方式，可选 'stroke' 和 'fill'。
      },
      zlevel: 1, //所有图形的zlevel值
      data: points,
    },
    {
      //线条系列数据
      type: "lines", //路径图,用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。
      symbol: ["none", "arrow"], //线两端的标记类型，可以是一个数组分别指定两端，也可以是单个统一指定。标记的图形：箭头，symbol的值还有这些:'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin'，还可以引入图片
      symbolSize: 10, //标记的大小
      effect: {
        //线特效的配置
        show: true,
        period: 6, //特效动画的时间，单位s
        trailLength: 0, //特效尾迹的长度。取值[0,1]值越大，尾迹越重
        symbol: planePath, //特效图形的标记 可选'circle'等
        symbolSize: 15, //特效标记的大小
      },
      lineStyle: {
        //线条样式
        normal: {
          color: "#93E8F8",
          width: 2.5, // 线条宽度
          opacity: 0.6, // 尾迹线条透明度
          curveness: 0.2, // 尾迹线条曲直度
        },
      },
      data: linesData,
    },
  ];
  const options = {
    backgroundColor: "#0E2152",
    geo: {
      /* geo:地理坐标系组件，地理坐标系组件用于地图的绘制。*/
      roam: true, // 是否开启鼠标缩放和平移漫游
      scaleLimit: {
        //滚轮缩放的极限控制
        min: 1,
        max: 6,
      },
      //zoom: 1.05, // 地图放大
      map: "shanxi",
      label: {
        /* 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。 */
        normal: {
          //通常状态下的样式
          show: true, //是否显示标签(地图上每块地方的名字)
          textStyle: {
            color: "#fff",
          },
        },
        emphasis: {
          //鼠标放上去高亮的样式
          textStyle: {
            color: "#fff",
          },
        },
      },
      itemStyle: {
        //地图区域的多边形图形样式
        normal: {
          borderColor: "#5089EC",
          borderWidth: 1,
          areaColor: {
            //地图区域的颜色
            colorStops: [
              {
                //0%处的颜色
                offset: 0,
                color: "rgba(0,102,154,0)",
              },
              {
                //100%处的颜色
                offset: 1,
                color: "rgba(0,102,154,0.4)",
              },
            ],
          },
        },
        //鼠标放上去高亮的样式
        emphasis: {
          areaColor: "#2386AD",
          borderWidth: 0,
        },
      },
    },
    series: series,
  };
  myChart.setOption(options);
  window.addEventListener("resize", () => {
    myChart.resize();
  });
};

// watch(() => props.data, renderChart);
</script>

<style>
.map {
  height: 100%;
}
.map .map1 {
  width: 6.475rem;
  height: 6.475rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(assets/images/map.png);
  background-size: 100% 100%;
  opacity: 0.3;
}
.map .map2 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8.0375rem;
  height: 8.0375rem;
  background: url(assets/images/lbx.png);
  animation: rotate1 15s linear infinite;
  opacity: 0.6;
  background-size: 100% 100%;
}
.map .map3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7.075rem;
  height: 7.075rem;
  background: url(assets/images/jt.png);
  animation: rotate2 10s linear infinite;
  opacity: 0.6;
  background-size: 100% 100%;
}
.map .chart {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 10.125rem;
}
</style>
